<template>
  <div>
    <div>
      <ele-page
        v-loading="loading"
        :formConfig="searchDialog"
        ref="eleTable"
        :operateList="operateList"
        @handleOperateEvent="handleOperateEvent"
        :column="column"
        :getList="getList"
        uniqueId="mesProdOrderTable"
      >
      </ele-page>
    </div>
    <ele-form-drawer class="dialog-pack" :isLoading="isLoading" v-model="formDataDialog" v-bind="formDescDialog" :request-fn="handleSubmit" :visible.sync="visible" :title="title" size="60%">
    </ele-form-drawer>
  </div>
</template>

<script>
import { operateList, searchConfig, rowConfig, sendThis } from './config'

import { getList } from '@/api/report/mesWaitPickOrderMaterials.js'
export default {
  name: 'mesWaitPickOrderMaterials ',
  mixins: [searchConfig],
  data() {
    const self = this
    return {
      title: null,
      visible: false,
      visible_generate: false, //下发
      isLoading: false,
      loading: false,
      formDataDialog: {},
      operateList,
      getList,
      // 列表页字段的绑定配置
      column: [
        {
          type: 'selection',
          fixed: 'left'
        },
        {
          type: 'index',
          label: $i18n.t('common.order'),
          width: 60,
          fixed: 'left'
        },
        // {
        //   prop: "saleCode",
        //   label: "销售订单编码",
        //   minWidth: 150,
        //   showOverflowTooltip: true,
        // },
        {
          prop: 'orderNo',
          label: $i18n.t('mesWaitPickOrderMaterials.orderNo'),
          minWidth: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'orderCode',
          label: $i18n.t('mesWaitPickOrderMaterials.orderCode'),
          minWidth: 200,
          showOverflowTooltip: true
        },
        {
          prop: 'planCode',
          label: $i18n.t('mesWaitPickOrderMaterials.planCode'),
          minWidth: 180,
          showOverflowTooltip: true
        },
        // {
        //   prop: 'printNum',
        //   label: $i18n.t('mesWaitPickOrderMaterials.printNum'),
        //   minWidth: 180,
        //   showOverflowTooltip: true
        // },
        {
          prop: 'status',
          label: $i18n.t('mesWaitPickOrderMaterials.status'),
          minWidth: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'materialCode',
          label: $i18n.t('mesWaitPickOrderMaterials.prodCode'),
          minWidth: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'materialName',
          label: $i18n.t('mesWaitPickOrderMaterials.prodName'),
          minWidth: 200,
          showOverflowTooltip: true
        },
        {
          prop: 'needNumber',
          label: $i18n.t('mesWaitPickOrderMaterials.needNumber'),
          minWidth: 110,
          showOverflowTooltip: true
        },
        {
          prop: 'unit',
          label: $i18n.t('mesWaitPickOrderMaterials.unit'),
          minWidth: 120,
          showOverflowTooltip: true
        },
        {
          prop: 'qty',
          label: $i18n.t('mesWaitPickOrderMaterials.qty'),
          minWidth: 120,
          showOverflowTooltip: true
        },
        {
          prop: 'actualQty',
          label: $i18n.t('mesWaitPickOrderMaterials.actualQty'),
          minWidth: 120,
          showOverflowTooltip: true
        },
        {
          prop: 'pickQty',
          label: $i18n.t('mesWaitPickOrderMaterials.pickQty'),
          minWidth: 120,
          showOverflowTooltip: true
        },
        {
          prop: 'workshopName',
          label: $i18n.t('mesWaitPickOrderMaterials.workshopName'),
          minWidth: 120,
          showOverflowTooltip: true
        },
        {
          prop: 'lineName',
          label: $i18n.t('mesWaitPickOrderMaterials.lineName'),
          minWidth: 120,
          showOverflowTooltip: true
        },
        {
          prop: 'warehouseName',
          label: $i18n.t('mesWaitPickOrderMaterials.warehouseName'),
          minWidth: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'returnWorkCellName',
          label: $i18n.t('mesWaitPickOrderMaterials.returnWorkCellName'),
          minWidth: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'createByName',
          label: $i18n.t('common.createByName'),
          minWidth: 120,
          showOverflowTooltip: true
        },
        {
          prop: 'createTime',
          label: $i18n.t('common.createTime'),
          minWidth: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'latestGetDate',
          label: $i18n.t('mesWaitPickOrderMaterials.latestGetDate'),
          minWidth: 180,
          showOverflowTooltip: true
        }
        // {
        //   prop: 'operate',
        //   label: '操作',
        //   width: 160,
        //   fixed: 'right',
        //   render: (h, scope) => {
        //     return <ele-row-operation scope={scope} rowConfig={rowConfig} onRowOperate={this.rowOperate} />
        //   }
        // }
      ]
    }
  },
  mounted() {
    sendThis(this)
  },
  methods: {
    // 表格顶部按钮操作事件
    handleOperateEvent(data) {
      this.title = data.name
      const fnc = {}
      fnc[data.handleName]()
    },
    // 表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name
      const fnc = {
        detail: () => {
          this.disableFields(true)
          this.rowDetail(row.id)
          this.visible = true
        }
      }
      fnc[handleName]()
    },
    doSubmit({ title, api, data }) {
      this.isLoading = true
      api(data)
        .then((res) => {
          const message = res.data.message
          this.$message.success(message || title)
          this.visible = false
          this.visible_generate = false
          this.refresh()
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 弹框提交事件
    handleSubmit(data) {
      if (this.isLoading) return // 判断状态
      const params = this.formDataDialog.id ? { title: $i18n.t('common.editSuccess'), api: rowUpdate, data } : { title: $i18n.t('common.addSuccess'), api: rowCreate, data }
      this.doSubmit(params)
    },
    disableFields(flag) {
      this.formDescDialog.disabled = flag
      this.formDescDialog.isShowSubmitBtn = !flag
    },

    rowDetail(id) {
      rowDetail(id).then((res) => {
        this.formDataDialog = res.data.result
      })
    },
    // 刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset)
    }
  }
}
</script>
